<script>
import UploadImage from '@/components/UploadImage.vue'

export default {
  name: 'BannerEdit',
  components: { UploadImage },
  data () {
    return {
      baseImageSrc: process.env.VUE_APP_BASE_PATH,
      show: false,
      dataForm: {
        src: '',
        status: 1
      },
      rules: {
        src: [{ required: true, message: '请上传图片' }],
        status: [{ required: true, message: '请选择状态' }]
      },
      imageInfo: {
        src: { list: [] }
      }
    }
  },
  methods: {
    getById (id) {
      this.show = true
      this.dataForm = { ...this.$options.data().dataForm }
      this.imageInfo = { ...this.$options.data().imageInfo }
      if (id) {
        this.$axios.get('banner',
          {
            params: {
              param: 'info',
              id
            }
          }
        ).then(data => {
          this.dataForm = { ...data }
          this.imageInfo.src.list.push({ name: data.src, url: this.baseImageSrc + data.src })
        }).catch(e => e)
      }
    },
    submit () {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$axios.post('banner?param=update', this.dataForm).then(() => {
            this.$message.success('更新成功！')
            this.show = false
            this.$emit('close')
          }).catch(e => e)
        }
      })
    },
    successImage ({ imageKey, filename }) {
      this.imageInfo[imageKey].list.push({ name: filename, url: this.baseImageSrc + filename })
      this.dataForm[imageKey] = this.imageInfo[imageKey].list.map(item => item.name).toString()
    },
    deleteImage ({ imageKey, index }) {
      this.imageInfo[imageKey].list.splice(index, 1)
      this.dataForm[imageKey] = this.imageInfo[imageKey].list.map(item => item.name).toString()
    }
    // /* 超出设置的limit张图片时触发 */
    // onExceed () {
    //   this.$message.error(`最多上传${this.imageInfo.imageLimit}张图片！`)
    // },
    // /* 上传之前，一般用于处理文件大小和文件类型的限制 */
    // beforeUpload (file) {
    //   const isImage = file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif'
    //   if (!isImage) {
    //     this.$message.error('请上传正确格式的图片！')
    //   }
    //   const isLt10M = file.size / 1024 / 1024 < 10
    //   if (!isLt10M) {
    //     this.$message.error('图片不能超过10M！')
    //   }
    //   return isImage && isLt10M
    // },
    // /* 上传成功后的处理：用于把正确的图片地址存入表单 */
    // onSuccess (res) {
    //   if (res.code === 200) {
    //     this.imageInfo.imageList = [{ url: '/api/' + res.data.fileName, name: res.data.fileName }]
    //     this.dataForm.src = res.data.fileName
    //   } else {
    //     this.$message.error(res.msg)
    //   }
    // },
    // /* 图片预览，添加此方法对应的属性，上传组件中才会出现预览按钮 */
    // onPreview (file) {
    //   this.imageInfo.showImage = true
    //   this.imageInfo.showImageUrl = file.url
    // },
    // /* 删除图片：这里希望加入删除前的询问，就必须使用async异步函数来实现，否则使用普通函数即可 */
    // async beforeRemove () {
    //   await this.$confirm('确定删除该图片吗?', { type: 'info', title: '询问' }).then(() => {
    //     this.dataForm.src = ''
    //     this.imageInfo.imageList = []
    //   })
    // }
  }
}
</script>

<template>
  <el-dialog title="轮播图编辑" :visible.sync="show" v-if="show">
    <el-form :model="dataForm" :rules="rules" label-width="80px" ref="dataForm">
      <el-form-item label="轮播名称">
        <el-input v-model="dataForm.name" placeholder="请输入轮播名" clearable/>
      </el-form-item>
      <el-form-item label="跳转地址">
        <el-input v-model="dataForm.href" placeholder="请输入跳转地址" clearable/>
      </el-form-item>
      <el-form-item label="轮播图片" prop="src">
        <el-input v-model="dataForm.src" style="display: none"/>

        <upload-image :image-list="imageInfo.src.list" :data="{type:'banner'}" image-key="src" @delete="deleteImage" @success="successImage"/>

        <!--
              action:请求地址
              list-type:使用ElementUI上传组件的那种默认样式，可选值有：text/picture/picture-card
              limit:限制图片可上传的最多张数
              on-exceed:超出limit设置的值时触发函数
              file-list:文件列表
              before-remove:删除前触发函数，on-remove属性则是在删除后触发函数，无法拦截删除行为
              before-upload:上传前触发函数，用于对上传文件做大小或类型的限制
              on-success:上传成功后触发函数，用于处理上传成功后的表单数据
              on-preview:预览file-list中的文件，不写该属性则默认不显示预览图标
              accept:设置选择文件窗口的默认展示类型
              data:上传时携带的额外参数，注意：上传的文件默认name为file，可以通过name属性更改

              -->
<!--        <el-upload-->
<!--          action="/api/upload"-->
<!--          list-type="picture-card"-->
<!--          :limit="imageInfo.imageLimit"-->
<!--          :file-list="imageInfo.imageList"-->
<!--          :on-exceed="onExceed"-->
<!--          :before-remove="beforeRemove"-->
<!--          :before-upload="beforeUpload"-->
<!--          :on-success="onSuccess"-->
<!--          :on-preview="onPreview"-->
<!--          accept=".jpg,.png,.gif,.jpeg"-->
<!--          :data="{type:'banner'}">-->
<!--          <i class="el-icon-plus"></i>-->
<!--        </el-upload>-->
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="1">可用</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
    <!--  此处弹窗是在另一个弹窗内继续弹出的，append-to-body属性可以控制该内部弹出的窗口存在于父级弹窗内，否则样式错乱  -->
<!--    <el-dialog append-to-body title="图片详情" :visible.sync="imageInfo.showImage" v-if="imageInfo.showImage">-->
<!--      <a :href="imageInfo.showImageUrl" title="点击查看原图" target="_blank">-->
<!--        &lt;!&ndash; display:block;width: 100%;height: auto; 这个样式是最经典的图片自适应写法！！！！  &ndash;&gt;-->
<!--        <img :src="imageInfo.showImageUrl" alt="" style="display:block;width: 100%;height: auto;">-->
<!--      </a>-->
<!--    </el-dialog>-->
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
